<template>
	<view>
		<!-- 自定义导航栏 -->
		<newsNavBar :tabIndex="tabIndex" :tabBars="tabBars" @change-tab="changeTab"></newsNavBar>
		<!-- 列表 -->
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height: swiperHeight + 'px'}" :current="tabIndex" @change="tabChange">
				<swiper-item>
					<!-- 关注 -->
					<scroll-view scroll-y class="list" @scrolltolower="loadMore">
						<block v-for="(item, index) in guanzhu.list" :key="index">
							<common-list :item="item" :index="index"></common-list>
						</block>
						<!-- 上拉加载 -->
						<load-more :loadText="guanzhu.loadText"></load-more>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<!-- 话题 -->
					<scroll-view scroll-y class="list">
						<!-- 搜索框 -->
						<view class="search-input">
							<input type="text" class="uni-input" placeholder="搜索话题" placeholder-class="icon iconfont icon-sousuo topic-search m-f-jcc" disabled @tap="openSearch"/>
						</view>
						<!-- 轮播图 -->
						<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="topic-swiper" :circular="true">
							<swiper-item v-for="(item, index) in topic.swiper" :key="index">
								<image class="swiper-img" :src="item.src" mode="widthFix" lazy-load></image>
							</swiper-item>
						</swiper>
						<!-- 热门分类 -->
						<topic-nav :nav="topic.nav"></topic-nav>
						<!-- 最近更新 -->
						<view class="topic-new">
							<view class="topic-new-title">最近更新</view>
							<block v-for="(item, index) in topic.list" :key="index">
								<topic-list :item="item"></topic-list>
							</block>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import commonList from '../../components/common/common-list.vue'
	import newsNavBar from '../../components/news/news-nav-bar.vue'
	import loadMore from '../../components/common/load-more.vue'
	import topicNav from '../../components/news/topic-nav.vue'
	import topicList from '../../components/news/topic-list.vue'
	export default {
		data() {
			return {
				swiperHeight: 500,
				tabIndex: 0,
				tabBars: [
					{ name: '关注', id: 'guanzhu' },
					{ name: '话题', id: 'topic' }
				],
				guanzhu: {
					loadText: '上拉加载更多',
					list: [
						// 图文
						{
							userpic: '../../static/logo.png',
							username: '昵称',
							sex: 1, // 0 男 1 女
							age: 25,
							isguanzhu: false,
							title: '我是标题',
							titlepic: '../../static/images/bg1.png',
							video: false,
							share: false,
							path: '四川 成都',
							sharenum: 20,
							commentnum: 30,
							goodnum: 35
						},
						// 文字
						{
							userpic: '../../static/logo.png',
							username: '昵称',
							sex: 0, // 0 男 1 女
							age: 25,
							isguanzhu: false,
							title: '我是标题',
							titlepic: '',
							video: false,
							share: false,
							path: '四川 成都',
							sharenum: 20,
							commentnum: 30,
							goodnum: 35
						},
						// 视频
						{
							userpic: '../../static/logo.png',
							username: '昵称',
							sex: 0, // 0 男 1 女
							age: 25,
							isguanzhu: false,
							title: '我是标题',
							titlepic: '../../static/images/bg1.png',
							video: {
								looknum: '20w',
								long: '2:22'
							},
							share: false,
							path: '四川 成都',
							sharenum: 20,
							commentnum: 30,
							goodnum: 35
						},
						// 分享
						{
							userpic: '../../static/logo.png',
							username: '昵称',
							sex: 0, // 0 男 1 女
							age: 25,
							isguanzhu: false,
							title: '我是标题',
							titlepic: '',
							video: false,
							share: {
								title: '我是分享标题',
								titlepic: '../../static/images/bg1.png'
							},
							path: '四川 成都',
							sharenum: 20,
							commentnum: 30,
							goodnum: 35
						},
					]
				},
				topic: {
					swiper: [],
					nav: [],
					list: []
				},
			}
		},
		components: {
			commonList,
			newsNavBar,
			loadMore,
			topicNav,
			topicList,
		},
		onLoad() {
			// API -> 系统信息 -> 获取可使用窗口高度
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100)
					this.swiperHeight = height
				}
			})
			this.__init()
		},
		methods: {
			__init() { // 初始化数据
				this.getSwiper()
				this.getNav()
				this.getHot()
			},
			openSearch() { // 打开搜索页
				uni.navigateTo({
					url: '../search/search?searchType=topic'
				})
			},
			async getSwiper() { // 获取轮播图
				let [err, res] = await this.$http.get('/adsense/0')
				if (!this.$http.errorCheck(err, res)) return
				let arr = []
				let list = res.data.data.list
				list.forEach(ele => {
					arr.push({
						src: ele.src,
						url: ele.url
					})
				})
				this.topic.swiper = arr
			},
			async getNav() { // 获取热门分类
				let [err, res] = await this.$http.get('/topicclass')
				if (!this.$http.errorCheck(err, res)) return
				let arr = []
				let list = res.data.data.list
				list.forEach(ele => {
					arr.push({
						id: ele.id,
						name: ele.classname
					})
				})
				this.topic.nav = arr
			},
			async getHot() { // 获取热门话题
				let [err, res] = await this.$http.get('/hottopic')
				if (!this.$http.errorCheck(err, res)) return
				let arr = []
				let list = res.data.data.list
				list.forEach(ele => {
					arr.push({ 
						id: ele.id,
						titlepic: ele.titlepic,
						title: ele.title,
						desc: ele.desc,
						totlenum: ele.post_count,
						todaynum: ele.todaypost_count,
					})
				})
				this.topic.list = arr
			},
			changeTab (index) { // 点击切换
				this.tabIndex = index
			},
			tabChange(e) { // 中间滑块滑动改变事件
				this.tabIndex = e.detail.current
			},
			loadMore() { // 上拉加载
				if (this.guanzhu.loadText !== '上拉加载更多') return
				// 修改状态
				this.guanzhu.loadText = '加载中...'
				// 获取数据
				setTimeout(() => {
					// 获取完成
					let obj = {
						userpic: '../../static/logo.png',
						username: '昵称',
						sex: 1, // 0 男 1 女
						age: 25,
						isguanzhu: false,
						title: '我是标题',
						titlepic: '../../static/images/bg1.png',
						video: false,
						share: false,
						path: '四川 成都',
						sharenum: 20,
						commentnum: 30,
						goodnum: 35
					}
					this.guanzhu.list.push(obj)
					this.guanzhu.loadText = '上拉加载更多'
				}, 1000)
				// this.guanzhu.loadText = '没有更多数据了'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-input {
		padding: 20rpx;
		.uni-input {
			background: #F4F4F4;
			border-radius: 10rpx;
		}
		.topic-search {
			font-size: 27rpx;
		}
	}
	.topic-swiper {
		padding: 0 20rpx 20rpx 20rpx;
		height: 300rpx;
		.swiper-img {
			width: 100%;
			border-radius: 10rpx;
		}
	}
	.topic-new {
		padding: 20rpx;
		.topic-new-title{
			padding-bottom: 10rpx;
			font-size: 32rpx;
			color: #333333;
		}
	}
</style>
